<template>
  <div class="rank_container">
    <div class="top" ref="top">
      <header-search></header-search>
      <tab-bar
        :clusterCodeList="clusterCodeList"
        @get-updata="upData1"
      ></tab-bar>
    </div>

    <div class="left_com" :style="`height:${height}px;`">
      <ul>
        <li
          v-for="(item, i) in leftList"
          :key="i"
          :class="square == i ? 'active' : ''"
          @click="tabList(i, item.categoryCode)"
        >
          <a>
            {{ item.title }}
          </a>

          <span class="line"></span>
        </li>
      </ul>
    </div>

    <rank-load v-if="isloading"></rank-load>

    <div
      class="right_com"
      :style="`height:${height}px`"
      @scroll="scrollFoo"
      ref="rightScroll"
      v-else
    >
      <ul ref="ulScroll">
        <li v-for="(item, i) in detailList" :key="item.id">
          <a>
            <lazy-component>
              <r-item
                :num="i + 1"
                :albumId="item.albumId"
                :img="item.img"
                :title="item.title"
                :shortIntro="item.shortIntro"
                :statCountInfo="item.statCountInfo"
                :salePoint="item.salePoint"
              >
                <img  alt="" @error="foo" v-lazy="item.img" />
              </r-item>
            </lazy-component>
          </a>
        </li>
        <li class="txt">
          <span v-if="a">{{
            this.page >= this.len ? "没有更多内容" : "加载更多内容..."
          }}</span>
        </li>
      </ul>

      <div></div>
    </div>


    <my-load v-if="isShow"></my-load>
  </div>
</template>

<script>
import { initRankData } from "@/request/api.js";
import { initRankListData } from "@/request/api.js";

export default {
  name: "MyRank",
  data() {
    return {
      height: 0,
      clusterCodeList: [],
      leftList: [],
      square: 0,
      clusterCode: "",
      categoryCode: "",
      detailList: [],
      index: 0,
      isloading: false,
      result: [],

      allList: {},
      page: 0,
      a: false,
      len: 0,
      delay: null,
      flag: true,
       isShow:false
      
    };
  },

  created() {
    this.initRank();
  },
  methods: {
    async initRank() {
       let flag = localStorage.getItem('flag')
      if(flag){
        this.isShow = flag
      }

      let { data: res } = await initRankData();

      // tab栏数据
      res.data.forEach((item) => {
        let obj = {
          clusterName: item.clusterName,
          clusterCode: item.clusterCode,
        };

        this.clusterCodeList.push(obj);
      });

      // code1
      this.clusterCode = this.clusterCodeList[0].clusterCode;

      this.result = res.data;
      let list = [];
      // 侧边栏数据
      this.result[0].categoryInfos.forEach((item) => {
        let obj = {
          title: item.title,
          categoryCode: item.categoryCode,
        };

        list.push(obj);
      });

      this.leftList = list;
      // code2
      this.categoryCode = this.leftList[0].categoryCode;

      this.getRankList(this.page);

      if(this.result.length > 0){
            this.isShow = false
            localStorage.setItem('flag',this.isShow)
          }
      
    },

    tabList(i, val) {
      this.square = i;
      this.categoryCode = val;
      this.page = 0;
      this.flag = true;
      this.a = false;
      this.getRankList();
    },

    async getRankList(page) {
      let page1 = page == undefined ? 0 : page;

      let loading = localStorage.getItem("loading");
      if (loading) {
        this.isloading = loading;
      }
      // 获取分类列表
      let list = [];
      let { data: req } = await initRankListData(
        this.clusterCode,
        this.categoryCode
      );

      console.log("详细",req)
      req.data.rankModuleInfoList.forEach((item) => {
        let info = {};
        if (item.albumInfo) {
          info = item.albumInfo;
        }

        let obj = {
          albumId: item.id,
          img: "https://imagev2.xmcdn.com/" + info.cover,
          title: info.title,
          shortIntro: info.shortIntro,
          statCountInfo: item.statCountInfo,
          salePoint:info.salePoint,
        };

        list.push(obj);
      });

      //

      this.len = Math.ceil(list.length / 10);

      for (let i = 0; i < this.len; i++) {
        console.log(list.slice(i * 10, (i + 1) * 10));
        let obj = list.slice(i * 10, (i + 1) * 10);
        this.allList[i] = obj;
      }

      setTimeout(() => {
        this.detailList = this.allList[page1];
        this.isloading = false;
        localStorage.setItem("loading", false);
      }, 300);

      this.loading = false;
    },

    getTabList(index, res) {
      // code1
      this.clusterCode = this.clusterCodeList[index].clusterCode;

      // 侧边栏数据
      res.data[index].categoryInfos.forEach((item) => {
        let obj = {
          title: item.title,
          categoryCode: item.categoryCode,
        };

        this.leftList.push(obj);
      });

      // code2
      this.categoryCode = this.leftList[0].categoryCode;
    },

    upData1(val) {
      this.flag = true;
      this.square = 0;
      this.page = 0;
      this.a = false;
      this.clusterCode = val.clusterCode;
      let index = val.index;
      let list = [];
      // 侧边栏数据
      this.result[index].categoryInfos.forEach((item) => {
        let obj = {
          title: item.title,
          categoryCode: item.categoryCode,
        };

        list.push(obj);
      });

      this.leftList = list;
      // code2
      this.categoryCode = this.leftList[0].categoryCode;

      this.getRankList();
    },

    upData2(val) {
      this.flag = true;
      this.page = 0;
      this.a = false;
      this.categoryCode = val;
      this.getRankList();
    },

    scrollFoo() {
      if (this.delay) {
        clearTimeout(this.delay);
      }

      this.delay = setInterval(() => {
        this.BottomLoading();
      }, 500);
    },

    BottomLoading() {
      // console.log(this.$refs.rightScroll.scrollTop)
      // console.log(this.$refs.rightScroll.offsetHeight)

      if (this.$refs.ulScroll) {
        let h = this.height;
        let sh = this.$refs.ulScroll.scrollHeight;
        let scrollY = this.$refs.rightScroll.scrollTop;
        if (scrollY >= sh - h) {
          this.a = true;
          this.page += 1;
          this.flag = false;
          if (this.page >= this.len) {
            this.a = true;
            this.page = this.len;
            return;
          }

          if (this.page) {
            this.detailList.push(...this.allList[this.page]);
            setTimeout(() => {
              this.a = false;
              this.flag = true;
            }, 3500);
          }
        }
      }
    },

    foo(e) {
      let img = e.srcElement;
      // img.src = "../../assets/icon/common/img_load.png";
      img.onerror = null;
    },
  },

  mounted() {
    this.height = window.innerHeight - this.$refs.top.offsetHeight;
  },
};
</script>

<style lang="scss" scoped>
.rank_container {
  padding-top: 90px;
  padding-left: 73px;
  .top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
  }
  .left_com::-webkit-scrollbar {
    display: none;
  }
  .left_com {
    position: fixed;
    top: 90px;
    left: 0;
    width: 73px;

    background-color: #f3f4f5;
    overflow-y: auto;
    ul {
      li {
        position: relative;
        padding: 15px 0;
        border: 1px solid #eee;
        a {
          display: block;
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          color: #727272;
          text-align: center;
        }

        .line {
          position: absolute;
          top: 0;
          left: 0;
          display: inline-block;
          height: 50px;
          width: 5px;
          background-color: #f86442;
          display: none;
        }
      }

      li.active {
        background-color: #fff;
        border-right: 0;
      }
      li.active .line {
        display: block;
      }
    }
  }

  .right_com::-webkit-scrollbar {
  }

  .right_com:-webkit-scrollbar-thumb {
    background-color: #cccc;
    border-radius: 10px;
  }

  // .right_com::-webkit-scrollbar-thumb:hover {
  //   background-color: #5fe3ff;
  // }

  // .right_com::-webkit-scrollbar-thumb:active {
  //   background-color: #00aff0;
  // }

  // .right_com::-webkit-scrollbar {
  //   height: 4px;
  //   width: 7px;
  // }

  .right_com {
    width: 100%;
    overflow-y: auto;
    background-color: pink;
    background-color: #fff;
    position: relative;
    .txt {
      height: 43px;
      line-height: 43px;
      font-size: 14px;
      color: #f86442;
      text-align: center;
    }
  }
}
/deep/.header{
  padding-bottom:0px  ;
}
</style>

